<template>
    <div class="container-fluid">
        <div class="panel panel-info">
            <vxe-toolbar class="panel-heading">
                <template #buttons>
                    <div class="row">
                        <div class="col-1">
                            <vxe-button type="text" status="info" icon="fa fa-chevron-left"
                                        @click="$router.push('/sys/user?action=back')"
                                        content="列表" :loading="isLoading">
                            </vxe-button>
                        </div>
                        <div class="col-10" style="text-align: center;">
                            <label>
                                用户多角色选择（{{ user.name }} -- {{ user.nick }} -- {{ user.roleName }}）
                            </label>
                        </div>
                    </div>
                </template>
            </vxe-toolbar>
            <div class="panel-body" style="padding: 0.125rem;">
                <vxe-table row-id="id" :loading="isLoading" :data="roles"
                           :checkbox-config="{trigger: 'row', highlight: true, range: true,checkRowKeys:selectedData}"
                           :sort-config="{trigger: 'cell', defaultSort: {field: 'id', order: 'desc'}, orders: ['desc', 'asc', null]}"
                           border show-header-overflow show-overflow highlight-current-row round
                           resizable ref="xTable1" align="center" :filter-config="{remote: true}"
                           :tooltip-config="{showAll: true, enterable: true}" :print-config="{}" :export-config="{}">
                    <vxe-column type="checkbox" width="40" fixed="left"></vxe-column>
                    <vxe-column field="name" title="角色名" width="200" fixed="left"></vxe-column>
                    <vxe-column field="code" title="代码"></vxe-column>
                    <vxe-column title="描述" field="represent"></vxe-column>
                </vxe-table>
            </div>
            <div class="panel-footer" style="text-align: center;">
                <vxe-button type="text" status="success" icon="fa fa-save" @click="submit()" :content="btnSubmitName"
                            :loading="isLoading">
                </vxe-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'SysUserRoles',
    data () {
        return {
            user: {id: null, name: '', nick: '', roleName: ''},
            roles: [],
            selectedData: [],
            isLoading: false,
            btnSubmitName: '保存'
        }
    },
    created () {
        this.user.id = this.$route.params.id
        this.loadData()
    },
    methods: {
        loadData () {
            this.isLoading = true
            this.$request.get(this.$apiSys.userRolesGetUrl, {userId: this.user.id}, true).then(data => {
                this.user = data.user
                this.roles = data.roles
                let d = []
                for (let i = 0; i < this.roles.length; i++) {
                    if (this.roles[i].hasPermission) {
                        d.push(this.roles[i].id)
                    }
                }
                console.log(d)
                this.selectedData = d
                this.isLoading = false
            })
        },
        submit () {
            let obj = this.$refs.xTable1.getCheckboxRecords()
            let roleIds = []
            for (let i = 0; i < obj.length; i++) {
                roleIds.push(obj[i].id)
            }
            console.log(roleIds)
            this.isLoading = true
            this.btnSubmitName = '正在保存...'
            this.$request.post(this.$apiSys.userRolesSaveUrl, {
                userId: this.user.id,
                roleIds: roleIds + ''
            }, true).then(res => {
                if (res.status) {
                    this.$XModal.message({
                        content: '保存成功',
                        status: 'success'
                    })
                    this.$router.push('/sys/user?action=back')
                } else {
                    // this.$XModal.message({
                    //   content: res.msg,
                    //   status: 'error'
                    // })
                    this.isLoading = false
                    this.btnSubmitName = '保存'
                }
            }, err => {
                this.isLoading = false
                this.btnSubmitName = '保存'
            })
        }
    }
}
</script>

<style scoped>

</style>
